<template>
  <div class="demo">
    <!-- <div class="addBtn" @click="addGoods"></div> -->
    <div class="cart">
      <div class="ball-container">
        <transition-group name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
          <div v-for="(ball, index) in balls" :key="index" v-show="ball.show" class="ball">
            <span class="inner inner-hook">
              <img style='width:100%; height:100%; border-radius:50%' :src='pic'/>
            </span>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "about",
  data() {
    return {
      pic:'',
      balls: [
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        }
      ],
      dropBalls: []
    };
  },
  methods: {
    addGoods(e, picpath) {
      this.pic = picpath
      let el = e.target;
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          this.dropBalls.push(ball)
          return 
        }
      }
    },
    beforeEnter(el) {
      let count = this.balls.length;
      while (count--) {
        let ball = this.balls[count];
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect();
          let x = rect.left - 70; 
          let y = -(window.innerHeight - rect.top - 65); 
          el.style.display = ""; 
          el.style.webkitTransform = `translate3d(0px, ${y}px, 0px)`;
          el.style.transform = `translate3d(0px, ${y}px, 0px)`;
          let inner = el.getElementsByClassName("inner-hook")[0];
          inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
          inner.style.transform = `translate3d(${x}px, 0, 0)`;
        }
      }
    },
    enter(el) {
      /* eslint-disable no-unused-vars */

      let rf = el.offsetHeight; // 主动触发浏览器重绘
      this.$nextTick(() => {
        el.style.webkitTransform = "translate3d(0, 0, 0)"; 
        el.style.transform = "translate3d(0, 0, 0)";
        let inner = el.getElementsByClassName("inner-hook")[0];
        inner.style.webkitTransform = "translate3d(0, 0, 0)";
        el.style.transform = "translate3d(0, 0, 0)";
      });
    },
    afterEnter(el) {
      let ball = this.dropBalls.shift(); //结束后，将这个活动中的小球删除
      if (ball) {
        ball.show = false;
        el.style.display = "none"; // 并且将其设为不可见
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.demo
  .addBtn
    position: absolute;
    top: 50px;
    right: 50px;
    width: 20px;
    height: 20px;
    background: blue;
    border-radius: 50%;

  .cart
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 100px;
    text-align: center;
    height: 50px;
    line-height: 50px;
.ball-container
  .ball
    position: fixed
    left: 70px
    bottom: 30px
    z-index: 200
    &.drop-enter, &.drop-enter-active
      transition all 0.8s cubic-bezier(0.49,-0.29,0.75,0.41)
    .inner
      display: inline-block
      width: 20px
      height: 20px
      border-radius: 50%
      //background: red
      transition: all .8s linear
</style>